<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 840px;
      height: 420px;
      padding: 100px 250px;
      box-sizing: border-box;
      background: url(../../../../images/webapi/第一单元/bg01.jpg) no-repeat center / cover;
    }
  </style>
</head>

<body>
  <div class="box">
    <p>2402抽奖会</p>
    <h1>一等奖：<span class="one">???</span></h1>
    <h2>二等奖：<span class="two">???</span></h2>
    <h3>三等奖：<span class="three">???</span></h3>
  </div>

  <script>

    const personArr = ['周杰伦', '刘德华', '周星驰', '范老师', '张学友']
    const arr = ['one', 'two', 'three']
    //循环写法
    for (let i = 0; i < arr.length; i++) {
      const ran = Math.floor(Math.random() * personArr.length)
      const span = document.querySelector('.' + arr[i])
      span.innerHTML = personArr[ran]
      personArr.splice(ran, 1)
    }
    console.log(personArr)

    //基础写法

    // //一等奖
    // const ran1 = Math.floor(Math.random() * personArr.length)
    // // console.log(ran1)
    // const one = document.querySelector('.one')
    // one.innerHTML = personArr[ran1]
    // personArr.splice(ran1, 1)
    // console.log(personArr)

    // //二等奖
    // const ran2 = Math.floor(Math.random() * personArr.length)
    // // console.log(ran1)
    // const two = document.querySelector('.two')
    // two.innerHTML = personArr[ran2]
    // personArr.splice(ran2, 1)
    // console.log(personArr)


    // //三等奖
    // const ran3 = Math.floor(Math.random() * personArr.length)
    // // console.log(ran1)
    // const three = document.querySelector('.three')
    // three.innerHTML = personArr[ran3]
    // personArr.splice(ran3, 1)
    // console.log(personArr)

  </script>

</body>

</html>